<template>
  <div>

    <!--添加房型-->
    <el-dialog title="收货地址" :visible.sync="savefang">
      <el-form :model="formfang">
        <el-form-item label="房型名称" :label-width="formLabelWidth">
          <el-input v-model="formfang.buildingName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="面积" :label-width="formLabelWidth">
          <el-input v-model="formfang.proportion" autocomplete="off" style="width: 200px"></el-input>平方米
        </el-form-item>

        <el-form-item label="朝向" :label-width="formLabelWidth">
          <el-select v-model="formfang.direction" placeholder="请选择朝向">
            <el-option label="东" value="1"></el-option>
            <el-option label="南" value="2"></el-option>
            <el-option label="西" value="3"></el-option>
            <el-option label="北" value="4"></el-option>
            <el-option label="东南" value="5"></el-option>
            <el-option label="东北" value="6"></el-option>
            <el-option label="西南" value="7"></el-option>
            <el-option label="西北" value="8"></el-option>
          </el-select>
        </el-form-item>

          <el-form-item label="房间配套" :label-width="formLabelWidth">
            <el-checkbox-group v-model="formfang.privateFacility" size="medium">
              <el-checkbox v-for="(item, index) in fpt" :key="index" :label="item.value"
                           :disabled="item.disabled">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

        <el-form-item label="租金" :label-width="formLabelWidth">
          <el-input v-model="formfang.rental" autocomplete="off" style="width: 200px"></el-input>元/月
        </el-form-item>

        <el-form-item label="独立区域图片" :label-width="formLabelWidth">
          <el-upload ref="field103" :on-success="handleAvatarSuccess" :file-list="formfang.frontCover"
                     :action="field103Action"
                     :before-upload="field105BeforeUpload">
            <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>



<!--=================================================================================================================-->



    <!--添加集中式房源-->
    <el-row>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="108px">
        <el-col :span="8">
          <el-form-item label="公寓名称" prop="field101">
            <el-input v-model="formData.flatName" placeholder="请输入公寓名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼盘名称" prop="field102">
            <el-input @blur="loupan" v-model="lou.name" placeholder="请输入楼盘名称" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="" prop="field103">
            <el-button type="primary" icon="el-icon-search" size="medium"> 添加楼盘 </el-button>
          </el-form-item>
        </el-col>

        <div style="height: 300px">
          <Demo style="width: 250px">

            <bm-control :offset="{width: '10px', height: '10px'}">
              <bm-auto-complete v-model="zsz" :sugStyle="{zIndex: 1}">
                <search-field placeholder="北京">
                  <input type="text" v-model="zsz"></input>
                </search-field> <!-- 这里指代一个自定义搜索框组件 -->
              </bm-auto-complete>
            </bm-control>

          </Demo>
        </div>

        <el-col :span="7">
        <el-form-item label="公共配套" :label-width="formLabelWidth">
          <el-checkbox-group v-model="formData.pubFac">
            <el-checkbox v-for="(item, index) in fie" :key="index" :label="item.value"
                         :disabled="item.disabled">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公共区域图片" prop="field105" required>
            <el-upload :on-success="handleAvatarSuccess" :file-list="formData.pictureUrl" :action="field104Action"
                       :before-upload="field105BeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
            <el-button @click="kkyulan">文件预览</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付款方式    押" prop="field107">
            <el-select v-model="formData.paymentMortgage" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field107Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付" prop="field108">
            <el-select v-model="formData.paymentPay" placeholder="请选择付" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field108Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="户型    室" prop="field109">
            <el-select v-model="formData.room" placeholder="请选择户型    室" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in field109Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="厅" prop="field110">
            <el-select v-model="formData.hall" placeholder="请选择厅" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field110Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公共装修情况" prop="field111">
            <el-select v-model="formData.decorate" placeholder="请选择公共装修情况" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field111Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设置管家" prop="field112">
            <el-select v-model="formData.manager" placeholder="请选择设置管家" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field112Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房源介绍" prop="field113">
            <el-input v-model="formData.introduce" type="textarea" placeholder="请输入房源介绍"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="添加房型" prop="field114">
            <el-button type="primary" icon="el-icon-search" size="medium" @click="addfang"> 添加房型 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

  </div>
</template>
<script>
import {listFang, listUser,listGong,selLou,addJi,yuemq} from "@/api/housings/add/addfen";
import {Base64} from "js-base64";
import demo from "@/views/housing/ditu/index"

export default {
  components: {
    'Demo':demo
  },
  props: [],
  data() {
    return {
      zsz:'',
      housings:[],
      publicFacility:[],
      field103Action: 'http://localhost:7002/priture/upload',
      fpt:[],
      fie: [],
      savefang:false,
      formLabelWidth: '120px',
      //房型表单
      formfang:{
        buildingName:'',
        proportion:'',
        direction:'',
        privateFacility:[],
        frontCover:[],
        rental:'',
      },
      field104Action: 'http://localhost:7002/priture/upload',
      lou:{
        name:''
      },
      //添加表单
      formData: {
        flatName: '',
        premisesId:'',
        pictureUrl:'',
        pubFac: [],
        paymentMortgage: '',
        paymentPay: '',
        room: '',
        hall: '',
        decorate: '',
        manager: '',
        introduce: '',
      },
      field105Action: 'http://jsonplaceholder.typicode.com/posts/',
      field105fileList: [],
      field107Options: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }],
      field108Options: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }],
      field109Options: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }, {
        "label": "7",
        "value": 7
      }, {
        "label": "8",
        "value": 8
      }, {
        "label": "9",
        "value": 9
      }],
      field110Options: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }],
      field111Options: [{
        "label": "精装",
        "value": 0
      }, {
        "label": "简装",
        "value": 1
      }, {
        "label": "毛坯",
        "value": 2
      }],
      field112Options: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getgong()
    this.getuser()
    this.getfang()
    this.yuemq()
  },
  mounted() {},
  methods: {
    //yue发送mq
    yuemq(){
      yuemq().then(res=>{

      })
    },
    kkyulan(){
      var url=this.formData.pictureUrl
      window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
    },
    handleAvatarSuccess(res,file){
      this.formData.pictureUrl=res.url
    },
    chuan(){

    },
    /*获取私有配套*/
    getfang(){
      listFang(this.queryParams).then(response => {
        this.fpt = response;
        console.log(response)
        this.loading = false;
      });
    },
    addfang(){
      this.savefang=true
    },
    /*查看是否有楼盘*/
    loupan(){
      if(this.lou.name==null || this.lou.name==""){
        return false;
      }
      selLou(this.lou.name).then(res=>{
        console.log(res.ss)
        if(res.ss==200){
          alert("楼盘查找成功")
          this.zsz=this.lou.name
          this.formData.premid=res
        }else{
          alert("没有此楼盘")
          this.zsz=this.lou.name
        }
      })
    },
    uptu(){
      console.log(this.field105fileList)
    },
    /*获取公共配套*/
    getgong(){
      listGong(this.queryParams).then(response => {
        this.fie = response;
        console.log(this.fie)
        this.loading = false;
      });
    },
    /*获取管家*/
    getuser(){
      listUser(this.queryParams).then(response => {
        // console.log(response)
        this.field112Options = response.rows;
        this.loading = false;
      });
    },
    submitForm() {
      // TODO 提交表单
      console.log(this.formData)
      addJi(this.formData).then(res=>{

      })

    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field105BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
